<template>  
  <div class="all_links">  
    <router-link active-class="active-link" class="link" to="/home">首页</router-link>  
    <router-link active-class="active-link" class="link" to="/sss">个人简介</router-link>  
    <router-link active-class="active-link" class="link" to="/shen">搜索</router-link>  
  </div>  
  <div class="content">  
    <router-view></router-view>  
  </div>  
</template>
<style scoped>  
.all_links {  
  display: flex;  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中（如果容器高度不是固定的，可能需要调整）*/  
  height: 50px; /* 设置容器高度以便垂直居中 */  
  margin-bottom: 20px; /* 链接区域和内容区域之间的间距 */  
}  
  
.link {  
  text-decoration: none; /* 移除链接的下划线 */  
  color: red; /* 将链接文本颜色设置为红色 */  
  font-weight: bold; /* 加粗字体 */  
  padding: 10px 20px; /* 链接的内边距 */  
  border-radius: 5px; /* 链接的圆角 */  
  transition: background-color 0.3s ease; /* 背景色过渡效果 */  
}  
  
.link:hover {  
  background-color: #f5f5f5; /* 鼠标悬停时的背景色 */  
  color: red; /* 鼠标悬停时保持文本颜色为红色 */  
}  
  
.active-link {  
  background-color: #007bff; /* 激活状态的链接背景色 */  
  color: white; /* 激活状态的链接文本颜色（这里保持为白色）*/  
}  
  
.content {  
  padding: 20px; /* 内容区域的内边距 */  
  border: 1px solid #ddd; /* 内容区域的边框 */  
  border-radius: 5px; /* 内容区域的圆角 */  
}  
</style>